import { handleInOutType, isHttps } from '@/utils/utils';
import { Image } from 'antd';
import moment from 'moment';

const ParkRecordView = (props: { record: SpotParkingRecordItem; left: number; title: string }) => {
  const { record, left, title } = props;
  const imgUrl = record?.lastPatrolInfo?.imageUrl || '';
  return (
    <div
      style={{
        textAlign: 'center',
        marginTop: 10,
        marginLeft: left,
        flex: 1,
        border: '1px solid #ddd',
        maxWidth: 600,
      }}
    >
      <div style={{ backgroundColor: '#1677ff', padding: 5 }}>
        <strong style={{ color: 'white' }}>{title}</strong>
      </div>
      {record && (
        <div>
          {imgUrl && (
            <Image
              alt="巡检图片"
              width={'100%'}
              height={200}
              src={isHttps ? imgUrl.replace('http://', 'https://') : imgUrl}
            />
          )}
          <div style={{ textAlign: 'left', marginLeft: 10 }}>
            <h3>车牌号码：{record.plateNumber || '无'}</h3>
            {record.plateRecordType && (
              <div>录入方式：{handleInOutType(record.plateRecordType)}</div>
            )}
            <div>驶入时间：{moment(record.inTime).format('YYYY-MM-DD HH:mm:ss')}</div>
            <div>驶入方式：{handleInOutType(record.inType)}</div>
            {record.outTime && (
              <>
                <div>驶出时间：{moment(record.outTime).format('YYYY-MM-DD HH:mm:ss')}</div>
                <div>驶出方式：{handleInOutType(record.outType)}</div>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
};
export default ParkRecordView;
